<!-- 年规 - 经营规划 - 主页 -->
<template>
  <view class="py-2">
    <template v-if="!state.loading">
      <Add v-if="isEdit && (isSocietyManager || isPlanManager)" ref="addRef" :data="state.data" @confirm="loadData" />
      <Detail v-else :data="state.data" @edit="state.edit = true" />
    </template>
    <view v-else class="h-600 flex flex-col justify-center items-center">
      <u-loading size="60" color="#F4AF22" />
    </view>
  </view>
</template>
<script setup>
import { getBusinessPlanDetail } from '@/common/http/module/plan.js'
import Add from './add.vue'
import Detail from './detail.vue'

import { usePlanStore } from '@/store/plan'
import { useUserStore } from '@/store/user'

const userStore = useUserStore()
const planStore = usePlanStore()

const addRef = ref()
const state = reactive({
  loading: true,
  edit: false,
  data: ''
})

const isEdit = computed(() => !state.data.plan || state.data.plan.length == 0 || state.edit)
const isSocietyManager = computed(() => userStore.isSocietyManager || userStore.isSocietyCreator)
const isPlanManager = computed(() => userStore.userInfo.id == state.data?.business_planning?.id)

function loadData() {
  state.loading = true
  getBusinessPlanDetail(userStore.currentSocietyId, planStore.year).then(res => {
    state.data = res.data
    state.edit = false
    state.loading = false
  }).catch(() => state.loading = false)
}

function onMemberChange(list) {
  if (!list || list.length == 0) return
  addRef.value.onUserSelect(list[0])
}

onLoad(() => loadData())

defineExpose({ onMemberChange })
</script>

<style lang="scss" scoped>
.card {
  margin-bottom: 30rpx;
  border-radius: 12rpx;
  background-color: #FFFFFF;
  box-shadow: -2rpx 4rpx 12rpx 2rpx rgba(206, 143, 12, 0.1);
  overflow: hidden;
}

.card-scale {
  padding: 0 32rpx 32rpx 32rpx;
  border-radius: 12rpx;
  background-color: #F4AF22;
}
</style>
